<!DOCTYPE html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<title>Building Evolution Time Editor</title>
	<script src="utils.js" type="text/javascript"></script>
	<script src="editor.js" type="text/javascript"></script>
	<style type="text/css">
	
		#results
		{
			width: 640px;
			height: 100px;
			overflow: auto;
		}
	
		#results table
		{
			border-collapse: collapse;
			height: 80px;
		}
	
			#results table td
			{
				border: 1px solid black;
				width: 10px;
			}
			
			#results table th
			{
				background-color: #AAAAAA;
			}
			
	</style>
</head>
<body>
	
	<form method="get" action="#" onsubmit="return false;">
		
		<label>Valeur de départ (min): </label>
		<input type="text" value="0" id="start"/><br/>
		
		<label>Valeur finale (min): </label>
		<input type="text" value="100" id="end"/><br/>
		
		<label>Nombre de niveaux (min): </label>
		<input type="text" value="100" id="numIterations" /><br/>
		
		<label>Courbe mathématique: </label>
		<select name="ease" id="ease"><br/>
			
			<optgroup label="Back">
				<option value="Back.easeIn">Back.easeIn</option>
				<option value="Back.easeOut">Back.easeOut</option>
				<option value="Back.easeInOut">Back.easeInOut</option>
			</optgroup>
				
			<optgroup label="Bounce">
				<option value="Bounce.easeIn">Bounce.easeIn</option>
				<option value="Bounce.easeOut">Bounce.easeOut</option>
				<option value="Bounce.easeInOut">Bounce.easeInOut</option>
			</optgroup>
				
			<optgroup label="Circ">
				<option value="Circ.easeIn">Circ.easeIn</option>
				<option value="Circ.easeOut">Circ.easeOut</option>
				<option value="Circ.easeInOut">Circ.easeInOut</option>
			</optgroup>
				
			<optgroup label="Cubic">
				<option value="Cubic.easeIn">Cubic.easeIn</option>
				<option value="Cubic.easeOut">Cubic.easeOut</option>
				<option value="Cubic.easeInOut">Cubic.easeInOut</option>
			</optgroup>
			
			<optgroup label="Elastic">
				<option value="Elastic.easeIn">Elastic.easeIn</option>
				<option value="Elastic.easeOut">Elastic.easeOut</option>
				<option value="Elastic.easeInOut">Elastic.easeInOut</option>
			</optgroup>
			
			<optgroup label="Expo">
				<option value="Expo.easeIn">Expo.easeIn</option>
				<option value="Expo.easeOut">Expo.easeOut</option>
				<option value="Expo.easeInOut">Expo.easeInOut</option>
			</optgroup>
			
			<optgroup label="Quad">
				<option value="Quad.easeIn">Quad.easeIn</option>
				<option value="Quad.easeOut">Quad.easeOut</option>
				<option value="Quad.easeInOut">Quad.easeInOut</option>
			</optgroup>
			
			<optgroup label="Quart">
				<option value="Quart.easeIn">Quart.easeIn</option>
				<option value="Quart.easeOut">Quart.easeOut</option>
				<option value="Quart.easeInOut">Quart.easeInOut</option>
			</optgroup>
			
			<optgroup label="Quint">
				<option value="Quint.easeIn">Quint.easeIn</option>
				<option value="Quint.easeOut">Quint.easeOut</option>
				<option value="Quint.easeInOut">Quint.easeInOut</option>
			</optgroup>
			
			<optgroup label="Sine">
				<option value="Sine.easeIn">Sine.easeIn</option>
				<option value="Sine.easeOut">Sine.easeOut</option>
				<option value="Sine.easeInOut">Sine.easeInOut</option>
			</optgroup>
			
			<optgroup label="Strong">
				<option value="Strong.easeIn">Strong.easeIn</option>
				<option value="Strong.easeOut">Strong.easeOut</option>
				<option value="Strong.easeInOut">Strong.easeInOut</option>
			</optgroup>
			
			<optgroup label="Linear">
				<option value="Linear.easeIn">Linear.easeIn</option>
				<option value="Linear.easeOut">Linear.easeOut</option>
				<option value="Linear.easeInOut">Linear.easeInOut</option>
				<option value="Linear.easeNone">Linear.easeNone</option>
			</optgroup>
			
		</select>
		
		<button onclick="onEditorSubmit();">OK</button>
		
	</form>
	
	<div id="results"></div>
	<canvas id="mycanvas" width="640" height="480"></canvas>
	
</body>
</html>